<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="新闻标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入新闻标题名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="typeName">
        <el-select v-model="queryParams.typeName" placeholder="请选择类型" clearable size="small">
          <el-option
            key="新闻"
            label="新闻"
            value="新闻"
          />
          <el-option
            key="公告"
            label="公告"
            value="公告"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="dateTime"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="handleQuery"/>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button size="mini" circle icon="el-icon-search" @click="showSearch=!showSearch"/>
        </el-tooltip>
      </div>
    </el-row>
    <el-main>
            <el-row gutter="20" v-for="(item,index) in noticeNewsList">
              <el-col :span="8" v-for="(items,indexs) in item.name">
                <el-card class="box-card" style="margin-top: 15px;height: 300px">
                  <div slot="header" class="clearfix">
                    <span>{{items.title}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">查看详情</el-button>
                  </div>
                  <div
                    class="item"
                  >
                    <el-row :gutter="20">
                       <el-container style="width: 100%">
                         <el-main style="width: 100%">
                           <el-col :span="8">
                             <el-image style="height: 80px;width: 80px;" :src="items.picUrl" :preview-src-list="items.bigPic"></el-image>
                           </el-col>
                           <el-col :span="16" style="font-size: 0.3em">
                             <div> {{items.content}}</div>

                           </el-col>
                         </el-main>
                         <el-footer style="color: #8492a6;font-size: 0.8em">
                            <el-row>
                              <el-col :span="12">
                                <div >类型:{{items.typeName}}</div>
                              </el-col>
                              <el-col :span="12">
                                  创建时间:{{items.createTime}}
                              </el-col>
                            </el-row>
                         </el-footer>
                       </el-container>


                    </el-row>
                  </div>

                </el-card>
              </el-col>

            </el-row>
    </el-main>



    <el-pagination style="margin-left: auto;margin-right: 180px;width: 200px"
      v-show="total>0"
      background
      :page-size="queryParams.size"
      :current-page.sync="queryParams.current"

       :total="total"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
  import {
    listNotice,
  } from "@/api/system/regime";

  export default {
    name: "NoticeNews",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],

        dateTime:"",
        // 总条数
        total: 0,
        // 应用表格数据
       noticeNewsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],

        // 查询参数
        queryParams: {
          current: 1,
          size: 6,
          title: undefined,
          typeName: undefined,
          startTime:undefined,
          endTime:undefined
        },
        // 显示搜索条件
        showSearch: true,
        // 表单参数
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询应用列表 */
      getList() {
        if(this.dateTime){
          this.queryParams.startTime=this.dateTime[0];
          this.queryParams.endTime=this.dateTime[1];
        }else{
          this.queryParams.startTime='2020-01-01';
          this.queryParams.endTime='2028-01-01';
        }
        this.loading = true;
        listNotice(this.queryParams).then(response => {
                  let data=response.data;
                  let datas=[{'name':[]},{'name':[]}];
                  this.total = response.total;
                   this.loading = false;
                   if(data){
                     data.forEach((item,index)=>{
                       item.bigPic=[];
                       //查看大图的数据类型为list
                       item.bigPic.push(item.picUrl);
                       if(index>2){
                            datas[0].name.push(item);
                       }else{
                         datas[1].name.push(item);
                       }

                     })
                   }

                   this.noticeNewsList=datas;

        })
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },


      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
      },
      // 多选框选中数据
      handleQuery(){
        this.queryParams.current=1;
        this.getList();
      }

    }

  };
</script>
